<template>
  <div class="slidebar">
   <div class="close">
      <!-- <svg-load name="guanbi" ></svg-load> -->
       <img class="closeImg" @click="closeSideBar" src="/static/images/encryption/nmc_3d7663de_nfj.png" alt="">
    </div>
    <UserLogin v-if="isSign"></UserLogin>
    <!-- <Navigation></Navigation> -->
    <SidebarMenu @closeSideBarr="closeSideBar"/>
    
    <!-- 未登录 -->
    <div v-if="!isSign" class="notLogged">
      <div class="btnBox" @click="_toView('/sign-in')">
        <ButtonBar :btnValue="_t18('login')" />
      </div>
      <div class="btnBox" @click="_toView('/sign-up')">
        <ButtonBar :btnReverse="false" :btnValue="_t18('register')" :btnColor="'#fff'" />
      </div>
    </div>

    <!-- 已登录 -->
    <div v-if="isSign && !userInfo.addressFlag && 1==0" class="logout-container">
      <div class="logout-btn" @click="exit">
        <div class="logout-content">
          <svg-load name="tuichu" class="logout-icon"></svg-load>
          <span>{{ _t18('layout', ['aams']) }}</span>
        </div>
        <div class="logout-hover-effect"></div>
      </div>
    </div>

    <!-- 优化后的退出弹窗 -->
    <Dialog
      v-model:value="showDialog"
      :content="_t18('layout_require')"
      confirm-button-color="#17AC74"
      cancel-button-color="#F0F2F5"
      :show-close-icon="false"
      @cancelBtn="cancelBtn"
      @confirmBtn="confirmBtn"
      :confirmButtonText="_t18('btnConfirm', ['bitmake'])"
      :cancelButtonText="_t18('cancel')"
      z-index="200"
    >
      <template #icon>
        <div class="dialog-icon-wrap">
          <svg-load name="tanchuang-jinggao" class="dialog-icon" />
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { _t18, _toView, _toReplace } from '@/utils/public'
import ButtonBar from '@/components/common/ButtonBar/index.vue'
import { signOut } from '@/api/user'
import { useUserStore } from '@/store/user/index'
import UserLogin from '../components/Sidebar/userLogin.vue'
import Navigation from '../components/Sidebar/navigation.vue'
import Dialog from '@/components/Dialog/index.vue'
import { useToast } from '@/hook/useToast'
import SidebarMenu from './SidebarMenu.vue'

const { _toast } = useToast()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const emit = defineEmits(['closeSideBar'])

// 登录状态
const isSign = ref(userStore.isSign)

// 弹窗控制
const showDialog = ref(false)

const exit = () => {
  showDialog.value = true
}

const confirmBtn = () => {
  showDialog.value = false
  signOut()
    .then((res) => {
      if (res.code ===200) {
		  _toast('layout_success')
		  userStore.signOut()
		  // 先关闭侧边栏再跳转
		  closeSideBar() 
		  // 使用 replace 方式跳转首页
		  _toReplace('/')   
		  // 强制清空路由缓存（如有需要）
		  setTimeout(() => {
			window.location.href = '/' 
		  }, 0)

      }
    })
    .catch((err) => {
      console.error('Logout error:', err)
    })
}

const cancelBtn = () => {
  show.value = false
}

const closeSideBar = () => {
  emit('closeSideBar')
}
</script>

<style lang="scss" scoped>
.slidebar {
  height: 100vh;
  scroll-behavior: smooth;
  overflow-y: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 300px;
}

.close {
  padding: 17px 15px 20px;
  display: flex;
  justify-content: flex-end;
  position: sticky;
  top: 0;
  background: var(--ex-sidebar-bg);
  z-index: 10;
  
  .closeImg {
    width: 18px;
    height: 18px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    
    &:hover {
      opacity: 0.7;
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
}

.notLogged {
  border-top: 1px solid var(--ex-divider-color);
  padding: 40px 15px;
  margin-top: auto;
  
  .btnBox {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.logout-container {
  margin-top: auto;
  padding: 20px 15px 30px;
  border-top: 1px solid var(--ex-divider-color);
  
  .logout-btn {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      
      .logout-hover-effect {
        opacity: 0.08;
      }
      
      .logout-icon {
        transform: translateX(-3px);
      }
    }
    
    &:active {
      transform: translateY(0);
      transition-duration: 0.1s;
    }
  }

  .logout-content {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--ex-logout-bg);
    border-radius: 8px;
    position: relative;
    z-index: 2;
    transition: background 0.3s ease;
  }

  .logout-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    transition: transform 0.3s ease;
  }

  span {
    font-size: 14px;
    font-weight: 500;
    color: var(--ex-logout-color);
    letter-spacing: 0.2px;
  }

  .logout-hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ex-logout-color);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }
}

// 对话框样式增强
.dialog-icon-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  animation: icon-float 2s ease-in-out infinite;

  .dialog-icon {
    width: 64px;
    height: 64px;
    color: #FFB020;
  }
}

@keyframes icon-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

:deep(.dialog-container) {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  
  .dialog-header {
    padding: 24px 24px 12px;
    
    .dialog-title {
      font-size: 20px;
      font-weight: 600;
      color: #1F2329;
      letter-spacing: 0.2px;
      text-align: center;
    }
  }

  .dialog-content {
    padding: 0 24px 24px;
    font-size: 15px;
    line-height: 1.5;
    color: #5E6670;
    text-align: center;
  }

  .dialog-footer {
    padding: 0 24px 24px;
    gap: 12px;
    display: flex;
    
    button {
      flex: 1;
      height: 44px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.2s ease;
      border: none;
      cursor: pointer;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
    
    .cancel-btn {
      background: #F0F2F5;
      color: #1F2329;
      
      &:hover {
        background: #E4E6E9;
      }
    }
    
    .confirm-btn {
      background: #17AC74;
      color: white;
      
      &:hover {
        background: #149666;
      }
    }
  }

  .header-line, .footer-line {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 -24px;
  }
}

// 颜色变量
:root {
  --ex-sidebar-bg: #1a1d28;
  --ex-divider-color: rgba(255, 255, 255, 0.08);
  --ex-logout-bg: rgba(255, 75, 75, 0.12);
  --ex-logout-color: #ff4b4b;
}

/* ✅ 让侧边栏层级高于 LOGO，保证能盖住它 */
.slidebar {
  z-index: 4001 !important;
}

/* ✅ 如果使用了 Vant Popup 包裹，确保容器层级也更高 */
:deep(.van-popup--left),
:deep(.van-popup--right) {
  z-index: 4000 !important;
}

</style>